<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-22 23:27:14
-->
<!-- 发现页面中的歌手页面组件 -->

<template>
    <div class="tags-bar">
        <ul>
            <li style="color:black;font-size: 13px;">{{ taglist.category }} :</li>
            <li v-for="(item, index) in taglist.list" :key="index" @click="changeTags(item,index)">
                <span :class="{active : currentIndex === index}">{{ item.name || item }}</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue'
defineProps({
    taglist: {
        type: Object,
        default: {}
    }
})

//声明要触发的实际
const emit = defineEmits(['tagBarClick'])

let currentIndex = ref(0)

function changeTags(item,index){
    currentIndex.value = index
    emit('tagBarClick',item)
}
</script>

<style lang="scss" scoped>
.tags-bar {
    ul {
        display: flex;
        flex-wrap: wrap;
        padding-top: 10px;
        text-align: center;

        li {
            display: inline-block;
            font-size: 13px;
            cursor: pointer;
            width: 80px;
            height: 20px;
            padding: 3px 5px;
            margin-bottom: 5px;
            border-right: 1px solid #d8d7d7;

            span {
                padding: 3px 5px;
                color: #676767;

                &:hover {
                    color: black;
                }
            }

        }
    }
}
.active {
    padding: 0px 10px;
    border-radius: 15px;
    color: #fd544e !important;
    background-color: #fff6f6;
}
</style>